<template>
  <el-dialog :title="title" :visible.sync="visible" :before-close="handleCancel" width="600" center>
    <div class="store-tree">
      <el-scrollbar style="height:100%">
        <el-tree
          v-if="treeData.length"
          show-checkbox
          :data="treeData"
          default-expand-all
          check-strictly
          highlight-current
          node-key="id"
          check-on-click-node
          :expand-on-click-node="false"
          @check-change="handleCheckChange"
          ref="tree"
        >
        </el-tree>
        <div class="no-have" v-else>暂无数据</div>
      </el-scrollbar>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleOk('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getUserTree } from '../js/user'

export default {
  name: 'PostUserTreeModal',
  data () {
    return {
      title: '选择巡检人',
      visible: false,
      treeData: []
    }
  },
  props: {
    checkUserInfo: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  methods: {
    // 新增
    add () {
      this.visible = true
      this.getUserTree()
    },

    // 查询部门tree
    async getUserTree () {
      let res = await getUserTree()
      if (res.code === 0) {
        console.log(res.data)
        this.treeData = this.recursionTree(res.data, 1)
        this.setDeptInfo(this.checkUserInfo)
      } else {
        this.$message.warning(res.msg)
      }
    },

    // 递归处理tree结构数据
    // type: 1 - 岗位, 2 - 人员
    recursionTree (result, type, roleNo) {
      const treeData = []
      if (result && result.length !== 0) {
        result.map(item => {
          const obj = {
            label: type === 1 ? item.roleName : item.userName,
            id: type === 1 ? item.roleNo : `${roleNo}-${item.userNo}`,
            disabled: type === 1,
            type,
            children: []
          }
          if (item.hasOwnProperty('roleUserList') && item.roleUserList && item.roleUserList.length !== 0) {
            obj.children = this.recursionTree(item.roleUserList, 2, item.roleNo)
          }
          treeData.push(obj)
        })
      }
      return treeData
    },

    // 提交表单
    handleOk () {
      const checkUser = this.$refs.tree.getCheckedNodes()[0]
      if (checkUser) {
        const { label: userName, id: userNo } = checkUser
        this.$emit('userTreeModalOk', { userName, userNo })
      } else {
        this.$emit('userTreeModalOk', {})
      }
      this.handleCancel()
    },

    // 单选设置
    handleCheckChange (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id])
      }
    },

    // 设置选中项
    setDeptInfo (val) {
      if (Object.keys(val).length) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys([val.userNo])
        })
      }
    },

    // 关闭
    handleCancel () {
      this.visible = false
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>
<style lang="scss" scoped>
.store-tree {
  box-sizing: border-box;
  border: 1px solid #e8ebee;
  padding: 20px;
  height: 500px;
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .no-have {
    width: 100%;
    text-align: center;
    padding-top: 130px;
  }
  /deep/ .el-checkbox.is-disabled {
    display: none;
  }
}
</style>
